<template>
  <div id="resizeContent" ref="resizeContent" class="relative h-full duration-700" style="width: 300px">
    <slot> </slot>
    <div v-show="isLine" id="line" class="absolute right-[-50px] top-[0px] h-full w-[65px] cursor-ew-resize"></div>
  </div>
</template>

<script>
export default {
  name: "MyDragResize",
  components: {},

  data() {
    return {
      initLeft: 300,
      left: null,
      isLine: true,
    };
  },
  mounted() {
    this.left = document.getElementById("resizeContent");
    this.drapContent();
  },
  destroyed() {
    const line = document.getElementById("line");
    line.onmousedown = null;
  },
  methods: {
    changWidth(value) {
      if (value) {
        this.left.style.width = `${this.initLeft}px`;
        this.isLine = true;
      } else {
        this.left.style.width = `${0}px`;
        this.isLine = false;
      }
    },
    drapContent() {
      // 获取 移动区域 的 宽度
      const line = document.getElementById("line");
      // 移动区域鼠标移入事件
      line.onmousedown = (e) => {
        this.left.style.transitionDuration = "0s";
        // 移动的距离
        const lineLeft = e.clientX;
        document.onmousemove = (e) => {
          // 移动的位置 （侧边栏的宽度 + 移动的宽度）
          const diffVal = this.initLeft + (e.clientX - lineLeft);
          // 移动区间的范围 [300, 500]
          if (diffVal >= 0 && diffVal <= 500) {
            // 移动区域距离左边的距离
            // line.style.left = `${diffVal}px`;
            // 左边缩放的宽度
            this.left.style.width = `${diffVal}px`;
          }
        };
        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmouseup = null;
          this.initLeft = Number(this.left.style.width.split("px")[0]);
          this.left.style.transitionDuration = "700ms";
        };
      };
    },
  },
};
</script>
